<template>
  <div>
    <ry-modal
      :title="isEdit ? '编辑细胞信息' : '新增细胞信息'"
      v-model="visible"
      destroyOnClose
      :maskClosable="false"
      :confirmLoading="confirmLoading"
      @ok="handleOk"
    >
      <a-spin :spinning="confirmLoading">
        <a-form-model ref="ruleForm" :model="form" :rules="rules" v-bind="modelConfig">
          <a-row :gutter="[24, 0]">

            <!-- 绑定项目（只读文本） -->
            <a-col :span="24" style="font-weight: 600; margin-bottom: 10px; margin-left: 20px">
              <span style="background-color: #3acaca; margin-right: 4px">&nbsp;</span>绑定项目
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="客户名称" :labelCol="{ span: 6 }" :wrapperCol="{ span: 12 }">
                <span>{{ form.nickname }}</span>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="申请项目" prop="applyProject" :labelCol="{ span: 6 }" :wrapperCol="{ span: 12 }">
                <span v-if="form.projects">
                    <a-tag color="blue">
                      {{ $getDictName('APPLY_PROJECT', form.projects.applyProject) }}
                    </a-tag>
                </span><a @click="openApplyProject" v-if="form.status === '0'">点击绑定项目</a>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="客户手机号" :labelCol="{ span: 6 }" :wrapperCol="{ span: 12 }">
                <span>{{ form.phone }}</span>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="客户编号" :labelCol="{ span: 6 }" :wrapperCol="{ span: 12 }">
                <span>{{ form.serialNumber }}</span>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="客户性别" :labelCol="{ span: 6 }" :wrapperCol="{ span: 12 }">
                <span>{{ form.sex }}</span>
              </a-form-model-item>
            </a-col>
            <a-col :span="12">
              <a-form-model-item label="客户年龄" :labelCol="{ span: 6 }" :wrapperCol="{ span: 12 }">
                <span>{{ moment().diff(moment(form.birth), 'years') + '岁' }}</span>
              </a-form-model-item>
            </a-col>
            <!-- 细胞信息 -->
            <a-col :span="24" style="font-weight: 600; margin-bottom: 10px; margin-left: 20px">
              <span style="background-color: #3acaca; margin-right: 4px">&nbsp;</span>细胞信息
            </a-col>

            <a-col :span="24">
              <a-form-model-item label="细胞编号" prop="cellCode">
                <a-input v-model="form.cellCode"></a-input>
              </a-form-model-item>
            </a-col>

            <a-col :span="24">
              <a-form-model-item label="采样时间" prop="sampleTime">
                <span>{{ form.sampleTime }}</span>
              </a-form-model-item>
            </a-col>

            <a-col :span="24">
              <a-form-model-item label="是否冻存" prop="isFrozen">
                <span>{{ isFrozenLabel(form.isFrozen) }}</span>
              </a-form-model-item>
            </a-col>

            <!-- 细胞类型（可编辑，下拉） -->
            <a-col :span="24">
              <a-form-model-item label="细胞类型" prop="cellType">
                <ry-select :data-source="$getDict('cell_type')" v-model="form.cellType"></ry-select>
              </a-form-model-item>
            </a-col>

            <!-- 细胞来源类型（只读文本） -->
            <a-col :span="24">
              <a-form-model-item label="细胞来源类型" prop="sourceType">
<!--                <span>{{ $getDictName('record_source', form.sourceType) }}</span>-->
                <ry-select :data-source="$getDict('record_source')" v-model="form.sourceType"></ry-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="细胞管数" prop="cellNum">
                <a-tooltip>
                  <span slot="title" v-if="cellNumStatus">已产生出库数据，无法编辑</span>
                  <a-input-number v-model="form.cellNum" placeholder="请输入细胞管数" :disabled="cellNumStatus" />
                </a-tooltip>
              </a-form-model-item>
            </a-col>
            <!-- 细胞数量（可编辑） -->
            <a-col :span="24">
              <a-form-model-item label="细胞数量" prop="quantity">
                <a-input v-model="form.quantity" placeholder="请输入细胞数量" />
              </a-form-model-item>
            </a-col>

            <!-- 状态（可编辑，下拉） -->
            <a-col :span="24">
              <a-form-model-item label="状态" prop="cellStatus">
                <ry-select :data-source="$getDict('cell_status')" v-model="form.status" :disabled="true"></ry-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="24">
              <a-form-model-item label="细胞回输日期" >
                <a-tooltip>
                  <span slot="title" v-if="cellNumStatus">已产生出库数据，无法编辑</span>
                  <a-date-picker @change="onChangeBirth" v-model="form.returnDate" :disabled="cellNumStatus" />
                </a-tooltip>
              </a-form-model-item>
            </a-col>

          </a-row>
        </a-form-model>
      </a-spin>
    </ry-modal>

    <ApplyProjectListModel ref="applyProjectListModel" @project="getProject" />
  </div>
</template>

<script>
import { CommonModal } from '@/ryweb'
import ApplyProjectListModel from './ApplyProjectListModel.vue'
import moment from 'moment'
export default {
  name: 'CellModel',
  mixins: [CommonModal],
  props: ['url'],
  components: { ApplyProjectListModel },
  data() {
    return {
      isEdit: false,
      confirmLoading: false,
      cellNumStatus: false,
      cellTypeList: [],
      cellStatusList: [],
      sourceTypeList: [],

      form: {},

      modelConfig: {
        labelCol: { span: 6 },
        wrapperCol: { span: 14 },
      },

      rules: {
        // applyProject: [{ required: true, message: '请选择项目', trigger: 'blur' }],
        cellCode: [{ required: true, message: '请输入细胞编号', trigger: 'blur' }],
        // sampleTime: [{ required: true, message: '请选择采样时间', trigger: 'change' }],
        // isFrozen: [{ required: true, message: '请选择是否冻存', trigger: 'blur' }],
        cellStatus: [{ required: true, message: '请选择状态', trigger: 'change' }],
        cellType: [{ required: true, message: '请选择细胞类型', trigger: 'change' }],
        returnDate: [{ required: true, message: '请选择细胞回输日期', trigger: 'change' }],
        quantity: [{ required: true, message: '请输入细胞数量', trigger: 'blur' }],
        cellNum: [{ required: true, message: '请输入细胞管数', trigger: 'blur' }],
      },
    }
  },
  created() {
  },
  methods: {
    openApplyProject () {
      this.$refs.applyProjectListModel.open(this.form.serialNumber)
    },
    onChangeBirth(date, dateString) {
      this.$set(this.form, 'returnDate', dateString)
    },
    isFrozenLabel(val) {
      if (val === 1 || val === '1' || val === true || val === '是') return '是'
      if (val === 0 || val === '0' || val === false || val === '否') return '否'
      return val || ''
    },

    add() {
      this.isEdit = false
      this.form = {}
      this.visible = true
      this.type = '1'
    },

    edit(value) {
      this.isEdit = true
      this.form = {}
      this.form = { ...value }
      console.log('edit this.form', this.form)
      this.type = '2'
      console.log('edit this.form.outbounds', this.form.outbounds.length)
      this.cellNumStatus = this.form.outbounds.length > 0
      this.visible = true
    },

    getProject(record) {
      this.$set(this.form, 'projects', record)
      this.$set(this.form, 'applyProjectId', record.id)
      console.log('edit this.form',this.form)
    },

    handleOk() {
      this.$refs.ruleForm.validate(valid => {
        if (!valid) return
        if (this.form.applyProjectId === null) {
          this.$message.warning('请点击绑定项目')
          return;
        }
        if (this.form.cellNum < 1) {
          this.$message.warning('细胞管数最少数量不能少于1')
          return;
        }
        this.confirmLoading = true
        const url = this.isEdit ? this.url.update : this.url.insert
        this.$post(url, this.form).then(res => {
          if (res.code === 200) {
            this.$message.success(this.isEdit ? '修改成功' : '新增成功')
            this.visible = false
            this.$emit('ModalOk')
          }
        })
        this.confirmLoading = false
      })
    },

  },
}
</script>

<style scoped>
.ry-modal .body-container .ant-form-item {
  margin-bottom: 0.05rem;
}
</style>
